<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery JSONView-格式化和语法高亮JSON格式数据查看插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" type="text/css" href="dist/jquery.jsonview.css">
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<header class="htmleaf-header">
		<h1>jQuery JSONView-格式化和语法高亮JSON格式数据查看插件 <span>A View JSON in a more readable format</span></h1>
	</header>
	<section class="htmleaf-container">
		<div class="htmleaf-content">
			<h2>Data</h2>
			  <button id="collapse-btn">Collapse</button>
			  <button id="expand-btn">Expand</button>
			  <button id="toggle-btn">Toggle</button>
			  <button id="toggle-level1-btn">Toggle level1</button>
			  <button id="toggle-level2-btn">Toggle level2</button>
			  <div id="json"></div>
			  <h2>Data Collapsed</h2>
			  <div id="json-collapsed"></div>
		</div>
	</section>
	
	<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script type="text/javascript" src="dist/jquery.jsonview.js"></script>
	<script type="text/javascript">
		var json = {
	      "hey": "guy",
	      "anumber": 243,
	      "anobject": {
	        "whoa": "nuts",
	        "anarray": [1, 2, "thr<h1>ee"],
	        "more":"stuff"
	      },
	      "awesome": true,
	      "bogus": false,
	      "meaning": null,
	      "chinese":"这是中文。",
	      "link": "http://www.htmleaf.com/",
	      "notLink": "http://www.htmleaf.com/ is great",
	      "multiline": ['Much like me, you make your way forward,',
	        'Walking with downturned eyes.',
	        'Well, I too kept mine lowered.',
	        'Passer-by, stop here, please.'].join("\n")
	    };
    
		$(function() {
	      $("#json").JSONView(json);

	      $("#json-collapsed").JSONView(json, { collapsed: true, nl2br: true, recursive_collapser: true });

	      $('#collapse-btn').on('click', function() {
	        $('#json').JSONView('collapse');
	      });

	      $('#expand-btn').on('click', function() {
	        $('#json').JSONView('expand');
	      });

	      $('#toggle-btn').on('click', function() {
	        $('#json').JSONView('toggle');
	      });

	      $('#toggle-level1-btn').on('click', function() {
	        $('#json').JSONView('toggle', 1);
	      });

	      $('#toggle-level2-btn').on('click', function() {
	        $('#json').JSONView('toggle', 2);
	      });
	    });
	</script>
</body>
</html>